<template>
  <div class="room-content">
    <Navbar :appTitle="appTitle" @ClickRight="ClickRight" />
    <Search
      ref="topSearch"
      class="search"
      placeholder="物品名称"
      :isAdd="false"
      :isScreen="true"
      :isType="true"
      @onSearch="onSearch"
      @onScreen="onScreen"
    >
    </Search>
    <search-tag ref="SearchTag" @getCategory="getCategory"></search-tag>
    <!--分页列表 -->
    <div class="listBox">
      <pageList ref="pageList" :checkedShow="false" :columns="columns" :minLen="4" :listUrl="listUrl">
        <div class="rt-column" slot="body" slot-scope="{ item }">

<div class="rt-row">
  <div class="column">
    <span class="column-t">物品属性：</span>
    <span class="column-c">{{ item.serialPropertiesName || '-' }}</span>
  </div>
</div>

<div class="rt-row">
  <div class="column">
    <span class="column-t">库存数量：</span>
    <span class="column-c">{{ item.inventoryNum || '-' }}  {{ item.unitName || '' }}</span>
  </div>
</div>

<div class="rt-row">
  <div class="column">
    <span class="column-t">最小库存：</span>
    <span class="column-c">{{ item.inventoryMin || '-' }}  {{ item.unitName || '' }}</span>
  </div>
</div>

<div class="rt-row">
  <div class="column">
    <span class="column-t">最大库存：</span>
    <span class="column-c" :style="{color: item.inventoryNum > item.inventoryMax ? '#F56C6C' : ''}">{{ item.inventoryMax || '-' }}  {{ item.unitName || '' }}</span>
  </div>
</div>
</div>
        <div slot="foot" slot-scope="{item}" class="operateBox">
          <div class="pubBtn" @click.stop="handleDetail(item)">出入库明细</div>
        </div>
      </pageList>
    </div>
  </div>
</template>
<script>
import Navbar from "@/components/navBar/navBar_right";
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import pageList from "@/components/pageList";
export default {
  name: "realInventory",
  components: {
    Navbar,
    Search,
    pageList,
    SearchTag,
  },
  data() {
    return {
      appTitle: "实时库存",
      listUrl:
        "/jksaas-produce/produce/warehouse/warehouseEntryDetail/realTimeInventory", //列表接口
      columns: {
        titleKey: "serialName", //标题
        subtitleKey: "serialSpecifications", //副标题
        content: [
          //内容
          {
            name: "物品属性",
            key: ["serialPropertiesName"],
          },
          {
            name: "库存数量",
            key: ["inventoryNum", "unitName"],
          },
          {
            name: "最小库存",
            key: ["inventoryMin", "unitName"],
          },
          {
            name: "最大库存",
            key: ["inventoryMax", "unitName"],
          },
        ],
      },
      keyword: "",
    };
  },
  beforeRouteLeave(to, from, next) {
    if (this.$refs.SearchTag.showSearchTag) {
      this.appTitle = this.$route.query.navTitle;
      this.$refs.SearchTag.showSearchTag = false;
      next(false);
    } else {
      next();
    }
  },
  created() {},
  mounted() {
    this.searchQuery();
  },
  methods: {
    // 搜索
    searchQuery(searchObj) {
      let params = {
        ...searchObj,
      };
      this.$refs.pageList.searchQuery(params);
    },
    // 查询
    onSearch(v) {
      this.keyword = v;
      let searchObj = {
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    // 更多查询页面
    onScreen() {
      this.appTitle = "更多筛选";
      this.keyword = this.$refs.topSearch.value;
      this.$refs.SearchTag.showModal(this.keyword);
    },
    getCategory(sureObj) {
      this.appTitle = "实时库存";
      this.keyword = sureObj.keyword;
      this.$refs.topSearch.value = sureObj.keyword;
      this.searchQuery(sureObj);
    },
    // 出入库明细
    handleDetail(e) {
      this.$router.push({
        path: "/inOutDetails",
        query: {
          serialNumber: e.serialNumber,
          serialName: e.serialName,
          // serialSpecifications: e.serialSpecifications,
          // serialProperties: e.serialProperties,
          // inOutType: e.inOutType,
          // warehouseType: e.warehouseType,
          // persion: e.persion,
          // persionNames: e.persionName,
          // createBy: e.createBy,
          // createByNames: e.createByName,
          // updateBy: e.updateBy,
          // updateByNames: e.updateByName,
        }
      });
    },
    ClickRight() {
      this.$refs.SearchTag.showSearchTag = false;
      this.$router.push({
        path: "/application",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.rt-column {
  padding: 20px 0 0 20px;
  //  border: 1px solid red;
}

.rt-row {
  margin-bottom: 20px;

  .column {
    width: 100%;
    display: flex;

    .column-t {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      // margin-bottom: 0.03rem;
    }

    .column-c {
      flex: 1;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      /* （超出限定的宽度就隐藏内容) */
      overflow: hidden;
      /* （设置文字在一行显示不能换行） */
      white-space: nowrap;
      /* （规定当文本溢出时显示省略符） */
      text-overflow: ellipsis;
    }
  }
}
.search {
  position: fixed;
  top: 93px;
  z-index: 98;
  width: 100%;
}
.listBox {
  margin-top: 120px;
  overflow-y: auto;
}
.room-content {
  height: 100vh;
  overflow-y: scroll;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
}
.operateBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding-right: 3px;
  font-size: 28px;
  font-weight: 500;
  color: #1890ff;
}
.pubBtn {
  margin-right: 20px;
  &:nth-last-child(1) {
    margin-right: 0;
  }
}
</style>
